<template>
  <div class="nav-bar">
    <div class="nav-bar-container" :style="{ color: titleColor, backgroundColor }">
      <div class="nav-bar-left">
        <slot name="left"></slot>
      </div>
      <div class="nav-bar-content">
        {{ title }}
      </div>
      <div class="nav-bar-right">
        <slot name="right"></slot>
      </div>
    </div>
    <!-- 占位符 -->
    <div v-if="showPlaceholder" class="nav-bar-placeholder"></div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '标题'
  },
  showPlaceholder: {
    type: Boolean,
    default: true
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#fff'
  },
  // 接受一个背景颜色默认是透明
  backgroundColor: {
    type: String,
    default: 'transparent'
  }
})
</script>

<style lang="scss" scoped>
.nav-bar {

  .nav-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    background-color: #161622;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    z-index: 999;
    color: #fff;

    .nav-bar-left {
      // 左浮
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
    }

    .nav-bar-content {
      font-size: 16px;
      font-weight: 500;
    }

    .nav-bar-right {
      // 右浮
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;


    }


  }



  .nav-bar-placeholder {
    height: 46px;
    position: relative;
  }
}
</style>